<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	
	<link rel="stylesheet" href="css/scss.css" />
	</head>

	<body>
		<div class="web">
			<header>
				<div class="icon_img1">
					<img src="img/2.png" />
				</div>
			</header>
			<section>
<div id="soccer">
	<img class=" p1_img " src="img/1_2_03.png" border="0"   />
	<img class="p2_img" src="img/1_3_07.png" border="0"/>
	<img class="p3_img" src="img/1_4_06.png" border="0"/>
</div>
				
				
				<!--星星-->
				<div class="star">
					<img src="img/4.png">
				</div>
				<!--树-->
				<div class="tree">
					<img src="img/3.png">
				</div>
				<!--彩条-->
				<div class="colour">
					<img src="img/5.png" />
				</div>
				<!--彩球-->
				<div  class="ball">
					<div id="div1" class="Christmas">
						<img src="img/1_5.png"/>
					</div>					
				</div>

				<!--半圆-->
				<div class="semi_circle">
					<a href="Luck_draw.html">
						<div class="icon1_1">
							<img src="img/1_1.png">
						</div>
						<div class="icon1_1">
							<img src="img/1_1.png">
						</div>
					</a>
					<p class="draw">
						我要抽奖
					</p>

				</div>

			</section>

			<footer>

			</footer>

		</div>
<!--<script src="js/shake.js" type="text/javascript" charset="utf-8"></script>-->
		<script>
			document.body.style.height = window.innerHeight + "px";
			/*动态改变根元素字体大小*/
			function recalc() {
				var clientWidth = document.documentElement.clientWidth;
				if(!clientWidth) return;
				document.documentElement.style.fontSize = 40 * (clientWidth / 640) + 'px';
				//字体大小   =1个rem单位表示多少个像素*(设备的宽度 /设计宽度)
			}

			function initRecalc() {
				recalc();
				var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
				if(!document.addEventListener) return;
				window.addEventListener(resizeEvt, recalc, false);
				document.addEventListener('DOMContentLoaded', recalc, false);
			}
			initRecalc();
		</script>
		<!--星星闪烁-->
		<script type="text/javascript">
			
	/*思路
	 * 
	 * 1. 每次改变一下元素的位置
	 * 按照一个中心点进行偏移，假设中心点left原始是10，那么每次就以left：10为中心做位置的移动
	 * 8 -> 12
	 * 
	 */		
	var div1 = document.getElementById('div1');
	var a=true;
	setInterval(function() {
		// 根据a的值，做不同的设置	
		div1.style.left = (a ? 8 : 12) + 'px';
		a = !a;
	},200);

			
			var counter = 0;
			//改变时间得到不同的闪烁间隔；
			function soccerOnload() {
				setTimeout("blink()", 100)
			}

			function blink() {
				soccer.style.visibility =
					(soccer.style.visibility == "hidden") ? "visible" : "hidden"
				counter += 1;
				setTimeout("blink()", 100)
			}
			soccerOnload()
			
			
			
function addRock(){
	var rock=$('<div class="rock"><img src="img/store1.png" /></div>');   //石

rock.appendTo("#web"); //插入到页面
//水平位置
rock.css({
	left:randomPosition(rock),
	top:"-50px"
	
})

//掉落间隔
rock.animate({
	top:"700px"
},randomTime(),"linear",function(){
	$(this).remove();
})
}
			
			
		</script>
	</body>

</html>